<template>
  <div class="payment-container">
    <n-card title="支付确认" class="payment-card">
      <n-descriptions bordered>
        <n-descriptions-item label="订单号">
          {{ order.id }}
        </n-descriptions-item>
        <n-descriptions-item label="服务类型">
          {{ getServiceType(order.type) }}
        </n-descriptions-item>
        <n-descriptions-item label="支付金额">
          ¥{{ order.amount }}
        </n-descriptions-item>
        <n-descriptions-item label="创建时间">
          {{ formatDate(order.createdAt) }}
        </n-descriptions-item>
      </n-descriptions>

      <div class="qrcode-section">
        <div class="qrcode-wrapper">
          <n-image :src="order.qrcode" />
        </div>
        <p class="qrcode-tip">请使用微信扫码支付</p>
        <n-progress
          type="circle"
          :percentage="progress"
          :processing="progress < 100"
          :status="progress === 100 ? 'success' : 'processing'"
        />
      </div>

      <div class="payment-actions">
        <n-space justify="center">
          <n-button @click="handleCancel">取消支付</n-button>
          <n-button type="primary" @click="handleRefresh">
            刷新状态
          </n-button>
        </n-space>
      </div>
    </n-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useMessage } from 'naive-ui'
import request from '../utils/request'

const route = useRoute()
const router = useRouter()
const message = useMessage()

const order = ref({})
const progress = ref(0)
let timer = null

// 获取服务类型显示文本
const getServiceType = (type) => {
  const types = {
    arbitration: '劳动仲裁代写',
    consultation: '法律咨询',
    contract: '合同审查'
  }
  return types[type] || type
}

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleString()
}

// 获取订单信息
const getOrder = async () => {
  try {
    const res = await request.get(`/api/orders/${route.params.id}`)
    order.value = res
    if (res.status === 'paid') {
      progress.value = 100
      clearInterval(timer)
      message.success('支付成功')
      setTimeout(() => {
        router.push('/member?tab=orders')
      }, 1500)
    }
  } catch (error) {
    message.error('获取订单信息失败')
  }
}

// 处理取消支付
const handleCancel = () => {
  router.push('/')
}

// 处理刷新状态
const handleRefresh = () => {
  getOrder()
}

// 启动轮询
const startPolling = () => {
  progress.value = 0
  timer = setInterval(() => {
    if (progress.value < 95) {
      progress.value += 5
    }
    getOrder()
  }, 3000)
}

onMounted(() => {
  getOrder()
  startPolling()
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped>
.payment-container {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.payment-card {
  margin-bottom: 20px;
}

.qrcode-section {
  margin: 24px 0;
  text-align: center;
}

.qrcode-wrapper {
  width: 200px;
  height: 200px;
  margin: 0 auto 16px;
}

.qrcode-tip {
  margin: 16px 0;
  color: #666;
}

.payment-actions {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #eee;
}
</style>
